import 'package:flutter/material.dart';
import 'package:flutter_flux/flutter_flux.dart';
import 'package:freemusic/components/SongItem.dart';
import 'package:freemusic/model/AbstractSong.dart';
import 'package:freemusic/model/netease/NeteaseDiss.dart';
import 'package:freemusic/stores/CloudDissStores.dart';
import 'package:freemusic/utils/Util.dart';

class WYCloudDissSongs extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return WYCloudDissSongsState();
  }
  
}

class WYCloudDissSongsState extends State<WYCloudDissSongs> with StoreWatcherMixin<WYCloudDissSongs>{

  CloudDissStore _cloudDissStore;

  @override
  void initState() {
    super.initState();
    _cloudDissStore = listenToStore(cloudDissToken);
  }

  @override
  Widget build(BuildContext context) {
    Color backgroundColor = Util.backgroundColor;
    NeteaseDiss diss = _cloudDissStore.current;
    List<AbstractSong> songs = _cloudDissStore.dissSong;

    return Scaffold(
      extendBody: true,
      backgroundColor: backgroundColor,
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Color.fromRGBO(158, 154, 136, 1),
              Color.fromRGBO(183, 158, 124, 1),
              Color.fromRGBO(154, 134, 98, 1),
            ],
          ),
        ),
        child: Column(
          children: <Widget>[
            _SongSheetHeader(
              gedanName: "${diss == null ? '' : diss.name}",
              picture: "${diss == null ? '' : diss.coverImgUrl}",
              description: "${diss == null ? '' : diss.description}",
            ),
            _SongContent(
              songs: songs,
            ),
          ],
        ),
      )
    );
  }

}

class _SongSheetHeader extends StatelessWidget {
  final String picture;
  final String gedanName;
  final String description;

  const _SongSheetHeader(
      {Key key, this.picture, this.gedanName, this.description})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    Color white = Colors.white;
    Color wordColor = Util.wordColor;
    return Container(
      padding: EdgeInsets.only(bottom: 20.0),
      child: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  height: 60,
                  padding: EdgeInsets.only(left: 8),
                  child: GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      Navigator.of(context).pop(1);
                    },
                    child: Row(
                      children: <Widget>[
                        Icon(
                          Icons.arrow_back,
                          color: white,
                        ),
                        Container(
                          margin: EdgeInsets.only(left: 8),
                          child: Text(
                            "歌单",
                            style: TextStyle(fontSize: 18, color: white),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                GestureDetector(
                  child: Container(
                    padding: EdgeInsets.all(12),
                    child: Icon(
                      Icons.more_horiz,
                      color: white,
                    ),
                  ),
                ),
              ],
            ),
          ),
          Row(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(left: 10, right: 10),
                width: 150,
                height: 150,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(12.0),
                  child: FadeInImage.assetNetwork(
                    image: picture,
                    placeholder: "images/sheet.png",
                  ),
                ),
              ),
              Container(
                height: 150,
                width: 150,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      gedanName,
                      style: TextStyle(color: white, fontSize: 18),
                    ),
                    Text(
                      "简介：$description",
                      style: TextStyle(
                        color: wordColor,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _SongContent extends StatelessWidget {
  final List<AbstractSong> songs;

  const _SongContent({
    Key key,
    this.songs,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    int itemCount = songs.length;
    Color backgroundColor = Util.backgroundColor;
    Color themeColor = Util.themeColor;
    return Expanded(
      child: Container(
        decoration: BoxDecoration(
          color: backgroundColor,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16),
            topRight: Radius.circular(16),
          ),
        ),
        child: Column(
          children: <Widget>[
            Container(
              height: 60,
              padding: EdgeInsets.only(left: 8, right: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  GestureDetector(
                    onTap: () {},
                    behavior: HitTestBehavior.opaque,
                    child: Row(
                      children: <Widget>[
                        Container(
                          margin: EdgeInsets.only(right: 8),
                          child: Icon(
                            Icons.play_circle_filled,
                            color: themeColor,
                            size: 28,
                          ),
                        ),
                        Text(
                          "全部播放（$itemCount 首）",
                          style: TextStyle(fontSize: 16),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: itemCount,
                itemBuilder: (context, index) {
                  return SongItem(
                    index: index +1,
                    song: songs[index],
                    type: SongItemType.Diss,
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}